<template>
	<z-nav-bar title="一对一解答"></z-nav-bar>
	<view>
		<view class="flex_fsc item">
			<image :src="`${setting.oss_pub_domain}/app-img/station-message/friend.png`" class="message-img"></image>
			<view class="width-100">
				<view class="flex_sbc">
					<view class="text-w z-font-32">授课提醒</view>
					<view class="z-font-24 uni-color-grey">08:38</view>
				</view>
				<view class="flex_sbc width-100">
					<view class="u-line-1 content">
						而对于数据的获取，我觉得必然是未而对于数据的获取而对于数据的获取
					</view>
					<view class="dot"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { getMessageList } from '@/api/station-message'

let pageNum = 1, pageSize = 10, total = 0 
const dataList = ref([])
function fetchData() {
	getMessageList({ pageNum, pageSize }).then(res => {
		if (pageNum === 1) dataList.value = res.rows
		else dataList.value.push(...res.rows)
		total = res.total
		uni.stopPullDownRefresh()
	})
}

onPullDownRefresh(() => {
	pageNum = 1
	fetchData()
})

onReachBottom(() => {
	if (dataList.value.length >= total) return
	pageNum += 1
	fetchData()
})
</script>

<style scoped>
.item {
	width: 100vw;
	height: 140rpx;
	box-sizing: border-box;
	padding: 22rpx 32rpx;
	border-bottom: 2rpx solid #EEEEF1;
}
.message-img {
	width: 96rpx;
	height: 96rpx;
	flex-shrink: 0;
	margin-right: 20rpx;
}

.dot {
	width: 20rpx;
	height: 20rpx;
	flex-shrink: 0;
	background: #e63131;
	border-radius: 10rpx;
}

.content {
	margin-top: 8rpx;
	width: 509rpx; color: #909399;
	font-size: 24rpx;
}
</style>
